<template>
  <div class="container">
    <div class="container-content">
      <vab-query-form>
        <vab-query-form-top-panel>
          <el-form :inline="true" label-width="80px">
            <el-form-item label="图标名称">
              <el-input
                v-model="filterValue"
                placeholder="请输入图表名称搜索图标"
                clearable
              />
            </el-form-item>
          </el-form>
          <div class="ml-100" style="margin-left: 20px">
            <el-text>{{ iconCurrent }}</el-text>
          </div>
        </vab-query-form-top-panel>
      </vab-query-form>
      <el-tabs
        v-model="currentActiveType"
        :stretch="true"
        type="border-card"
        @tab-click="handleClick"
      >
        <el-tab-pane
          v-for="(pane, index) in tabsList"
          :key="index"
          :label="pane.label"
          :name="pane.name"
        >
          <el-scrollbar height="220px">
            <ul class="flex flex-wrap px-2 ml-2">
              <li
                v-for="(item, key) in pageList"
                :key="key"
                :title="item"
                class="icon-item p-2 cursor-pointer mr-2 mt-1 flex justify-center items-center border border-[#e5e7eb]"
                @click="onChangeIcon(item)"
              >
                <IconifyIconOnline
                  :icon="currentActiveType + item"
                  width="20px"
                  height="20px"
                />
              </li>
            </ul>
            <el-empty
              v-show="pageList.length === 0"
              :description="`${filterValue} 图标不存在`"
              :image-size="60"
            />
          </el-scrollbar>
        </el-tab-pane>
      </el-tabs>
      <el-pagination
        class="flex-auto ml-2"
        :total="totalPage"
        :current-page="currentPage"
        :page-size="pageSize"
        :pager-count="5"
        layout="pager"
        background
        @current-change="onCurrentChange"
      />
    </div>
  </div>
</template>

<script setup name="RemixIcon" lang="ts">
import { IconJson } from "@/components/ReIcon/data";
import { cloneDeep } from "@pureadmin/utils";
import { ref, computed, CSSProperties, watch } from "vue";
type ParameterCSSProperties = (item?: string) => CSSProperties | undefined;

const iconList = ref(IconJson);
const currentActiveType = ref<string>("ep:");
// 深拷贝图标数据，前端做搜索
const copyIconList = cloneDeep(iconList.value);
const totalPage = ref(0);
// 每页显示35个图标
const pageSize = ref(35);
const currentPage = ref(1);

// 搜索条件
const filterValue = ref("");
const iconCurrent = ref("");

const tabsList = [
  {
    label: "Element Plus",
    name: "ep:"
  },
  {
    label: "Remix Icon",
    name: "ri:"
  },
  {
    label: "Font Awesome 5 Solid",
    name: "fa-solid:"
  }
];

const pageList = computed(() => {
  let list = [];
  if (copyIconList && copyIconList[currentActiveType.value]) {
    if (filterValue.value) {
      list = copyIconList[currentActiveType.value]
        .filter(i => i.includes(filterValue.value))
        .slice(
          (currentPage.value - 1) * pageSize.value,
          currentPage.value * pageSize.value
        );
    } else {
      list = copyIconList[currentActiveType.value].slice(
        (currentPage.value - 1) * pageSize.value,
        currentPage.value * pageSize.value
      );
    }
  }
  return list;
});

function handleClick({ props }) {
  currentPage.value = 1;
  currentActiveType.value = props.name;
}

function onChangeIcon(item) {
  iconCurrent.value = currentActiveType.value + item;
  // emit("handle-icon", currentActiveType.value + item);
}

function onCurrentChange(page) {
  currentPage.value = page;
}

watch(
  () => pageList.value,
  () => {
    if (!currentActiveType.value) {
      currentActiveType.value = "ep:";
    }
    totalPage.value = copyIconList[currentActiveType.value].filter(i =>
      i.includes(filterValue.value)
    ).length;
  },
  { immediate: true }
);
</script>

<style lang="scss" scoped>
.remix-icon-container {
  :deep() {
    .el-card__body {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 60px;
      max-height: 60px;
      padding: $base-padding;
      cursor: pointer;

      i {
        font-size: 28px;
        color: $base-color-grey;
        text-align: center;
        pointer-events: none;
        cursor: pointer;
        transition: $base-transition;
      }

      &::after {
        position: absolute;
        bottom: -30px;
        width: 100%;
        padding: 4px 0;
        font-size: $base-font-size-small;
        color: rgb(255, 255, 255);
        text-align: center;
        content: "点击复制";
        background-color: $base-color-primary;
        transition: $base-transition;
      }

      &:hover {
        i {
          margin-top: -$base-margin;
        }

        &::after {
          bottom: 0;
        }
      }
    }
  }

  .icon-text {
    height: 30px;
    margin-top: -15px;
    overflow: hidden;
    font-size: 12px;
    line-height: 30px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
  }
}
</style>
